<script setup>
import { markRaw, reactive, readonly, shallowReadonly, toRaw } from 'vue';

let person = reactive({
    name: "sunWuKong",
    age: 18
})

const personToRow = () => {
    person = toRaw(person) // 转化成了普通对象，不再是响应式对象
    person.age++ // 页面不会更新
    console.log(person);
}

const personMarkRow = () => {
    /*
    {
        name:"sunWuKong",
        age:18,
        otherMsg:{
            sex:"male",
            children:2
        }
    }
    标记otherMsg不要转化成响应式对象
    */
    person.otherMsg = markRaw({
        sex: "male",
        children: 0
    })

    person.otherMsg.children++
    console.log(person)
}


</script>

<template>
    <h2>person</h2><span>{{ person }}</span>
    <button @click="personToRow">toRow</button>
    <button @click="personMarkRow">MarkRow</button>
</template>

